<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/denglu.css">
</head>

<body>
    <!-- 背景 -->
    <div class="back">
        <img src="images\gugongh.jpg">
    </div>
    <div class="card">
        <div class="login-before">
            <h2>朝廷人事管理系统</h2>
        </div>
        <div class="login-header">
            <a id="link" href="javascript:;">点击登录管理系统</a>
        </div>
    </div>
    </div>
    <div id=" login" class="login">
        <div id="title" class="login-title">登录系统
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">×</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input1">

            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
                <p class="message"><img src="images/tishi.png">请输入6~16为密码</p>
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录</a>
        </div>
        <div class="zhuce"><a href="zhuce.html">没有账号，点击注册</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
    /jquery-1.4.min.js"></script>
    <script>  // 1. 获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
        link.addEventListener('click', function () {
            mask.style.display = 'block';
            login.style.display = 'block';
        })
        // 3. 点击 closeBtn 就隐藏 mask 和 login 
        closeBtn.addEventListener('click', function () {
            mask.style.display = 'none';
            login.style.display = 'none';
        })
        // 4. 开始拖拽
        // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function (e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })
        //密码验证
        //1.获取元素
        var loginButton = document.querySelector('.login-button');
        var listiInput = document.querySelector('.list-input');
        var message = document.querySelector('.message');
        //2.注册事件
        listiInput.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';  //改变类名
                message.innerHTML = '您输入的位数不对';
                alert('请输入正确的密码');
            } else {
                message.className = 'message right';  //改变类名
                message.innerHTML = '正确输入';
                loginButton.onclick = function () {
                    alert('登录成功');
                    var input = document.querySelector('.list-input1');
                    var uname = input.value;
                    let id = 1
                    window.location.href = "guanliyemian.html?" + uname;//跳转同时把用户名传走
                }
            }
        }




    </script>


</body>

</html>